Day 5 HTML初步架構(HTML分頁 -1)

2023 iThome 鐵人賽

DAY 5

Modern Web

基礎網頁開發30天系列第 5 篇

15th鐵人賽

benny91917

2023-09-20 20:18:10

368 瀏覽

分享至

<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="utf-8">
        <title>關於網頁設計</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="自我介紹">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="logo">
                關於HTML
            </div>
            

            <nav class="navigation">
                <ul>
                    <li><a href="index.html">首頁</a></li>
                    <li><a class="active" href="HTML.html">HTML</a></li>
                    <li><a href="CSS.html">CSS</a></li>
                    <li><a href="Java Script.html">Java Script</a></li>
                </ul>
            </nav>

        </header>

HTML分頁的部分前半段程式碼與首頁的部分基本上一樣，為設置網頁的基本架構。

        <main>
            <div>HTML（HyperText Markup Language）是一種標記語言，用於創建和結構化網頁的內容。
                它是網頁的基礎，用於定義網頁上的文本、圖片、超連結和多媒體等元素。HTML通常與CSS（層疊樣式表）和JavaScript一起使用，這三者共同構成了網頁開發的基本技術。
            </div>

            <div>以下是HTML的一些重要特點和概念：</div>
            <div>標記語言： HTML使用標記（Tags）來標識文本的不同部分，並告訴瀏覽器如何顯示這些內容。
                每個HTML標籤都由一對尖括號 (&lt;&gt;) 包裹，通常成對出現，包括開始標籤和結束標籤。
                例如，&lt;p&gt;這是一個段落。&lt;/p&gt;中的 &lt;p&gt; 是段落的開始標籤，&lt;/p&gt; 是段落的結束標籤。</div>
            
            <div>元素： HTML文檔由一個個元素（Elements）組成，每個元素包括一個開始標籤、元素內容和一個結束標籤（有些元素是自結束的，不需要結束標籤）。元素可以是標題、段落、圖片、超連結等等。</div>
           
            <div>層次結構： HTML文檔是一種樹狀結構，元素可以包含其他元素，形成層次結構。這種結構使您可以組織和嵌套不同的內容。</div>
            <div>超連結： HTML允許您創建超連結，這些連結允許用戶從一個網頁跳轉到另一個網頁。超連結通常使用 &#x2018;&lt;a&gt;&#x2019; 標籤來定義。</div>
            <div>圖片和多媒體： HTML允許您在網頁上嵌入圖片、音頻、視頻等多媒體內容。圖片通常使用 &lt;img&gt; 標籤，而多媒體通常使用 &lt;audio&gt; 和 &lt;video&gt; 標籤。</div>
            <div>表格和表格： 您可以使用HTML創建表格（&lt;table&gt;）和表格行（&lt;tr&gt;）以及表格單元格（&lt;td&gt;）。這些元素用於組
            <div>表單： HTML允許您創建交互式表單，用戶可以填寫表單並提交數據。表單元素包括 &lt;form&gt;、&lt;input&gt;、&lt;textarea&gt; 等。</div>
            <div>HTML版本： HTML有不同的版本，最新的版本是HTML5，它引入了許多新功能和改進，並支持多媒體、響應式設計和更多的語義元素。</div>
            <div>HTML是網頁開發的基礎，它提供了一個結構和內容的框架，而CSS則用於設計網頁的外觀和佈局，JavaScript則用於實現網頁的交互性和動態效果。這三種技術通常一起使用，稱為前端開發，用於創建現代網頁</div>
        </main>

而後半段程式碼我則是用｀<｀div>標記符號來增加對HTML這個標記語言的描述。而文字敘述的內容如下：

HTML（HyperText Markup Language）是一種標記語言，用於創建和結構化網頁的內容。它是網頁的基礎，用於定義網頁上的文本、圖片、超連結和多媒體等元素。HTML通常與CSS（層疊樣式表）和JavaScript一起使用，這三者共同構成了網頁開發的基本技術。
以下是HTML的一些重要特點和概念：

標記語言： HTML使用標記（Tags）來標識文本的不同部分，並告訴瀏覽器如何顯示這些內容。每個HTML標籤都由一對尖括號 < > 包裹，通常成對出現，包括開始標籤和結束標籤。例如，<p>這是一個段落。</p>中的 <p> 是段落的開始標籤，</p> 是段落的結束標籤。
元素：HTML文檔由一個個元素（Elements）組成，每個元素包括一個開始標籤、元素內容和一個結束標籤（有些元素是自結束的，不需要結束標籤）。元素可以是標題、段落、圖片、超連結等等。
層次結構： HTML文檔是一種樹狀結構，元素可以包含其他元素，形成層次結構。這種結構使您可以組織和嵌套不同的內容。
超連結： HTML允許您創建超連結，這些連結允許用戶從一個網頁跳轉到另一個網頁。超連結通常使用 <a> 標籤來定義。
圖片和多媒體：HTML允許您在網頁上嵌入圖片、音頻、視頻等多媒體內容。圖片通常使用 <img> 標籤，而多媒體通常使用 <audio> 和 <video> 標籤。
表格和表格：您可以使用HTML創建表格（<table>）和表格行（<tr>）以及表格單元格（<td>）。這些元素用於組織數據。
表單： HTML允許您創建交互式表單，用戶可以填寫表單並提交數據。表單元素包括 <form>、<input>、<textarea> 等。
HTML版本：HTML有不同的版本，最新的版本是HTML5，它引入了許多新功能和改進，並支持多媒體、響應式設計和更多的語義元素。